import React from 'react';
import groupBy from 'lodash/groupBy';
import { Empty } from 'antd';
import styles from './index.module.less';

const GroupLabelPopupSection = ({ title, data, value, renderPopupValueItem }) => {
    const groupedValue =
        value?.length &&
        groupBy(
            data.filter(item => value.indexOf(item.id) > -1),
            'pId'
        );

    return (
        <div className={styles.popup}>
            <div className={styles.popupTitle}>
                {title}
                {value?.length ? `(${value.length})` : ''}
            </div>
            <div className="groupValueWrap">
                {groupedValue ? (
                    Object.keys(groupedValue).map(groupId => (
                        <React.Fragment key={groupId}>
                            <div className={styles.groupTitle}>
                                {data.filter(item => String(item.id) === groupId)[0].title}(
                                {groupedValue[groupId].length})
                            </div>
                            <div className={styles.groupValues}>
                                {groupedValue[groupId].map(item => (
                                    <div className={styles.groupValueItem} key={item.id}>
                                        {renderPopupValueItem ? renderPopupValueItem(item) : item.title}
                                    </div>
                                ))}
                            </div>
                        </React.Fragment>
                    ))
                ) : (
                    <div className={styles.noData}>
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ height: 35 }} />
                    </div>
                )}
            </div>
        </div>
    );
};

export default GroupLabelPopupSection;
